<template>
    <div>
        <div class="p-xs b-r-xs color-block" v-for="(item, index) in colorList" v-bind:style="{ 'background-color': item.value,}" :title="item.name" v-bind:class="[item.value == curColor || item.name == curColorName  ? 'color-sec' : '']" v-on:click="secColor(index)">&nbsp;</div>
    </div>
</template>

<script>
    export default {
        name: "ColorSelecter",
        props: {
            colorList: {
                type: Array,
                default: function () {
                    return [];
                },
            },
            color:{
                type: String,
                default:'',
            },
            colorName:{
                type: String,
                default:'',
            },
        },
        data() {
            return {
                curColor:'',
                curColorName:'',
            };
        },
        mounted() {
            this.curColor = this.color;
            this.curColorName = this.colorName;
        },
        methods: {
            secColor:function (index) {
                this.curColor = this.colorList[index].value;
                this.curColorName = this.colorList[index].name;
                this.$emit('update:color', this.curColor);
                this.$emit('update:colorName', this.curColorName);
            }
        }
    }
</script>

<style scoped>
    .color-block{height: 30px;float:left;width:30px; margin: 10px;padding: 2px;cursor:pointer;}
    .color-sec{    box-shadow: 0px 0px 5px red;transform: scale(1.5);}
</style>